<template>
  <!-- 分页 -->
  <div class="pagination-direction" :style="{'text-align':config.direction }">
    <el-pagination
      :current-page.sync="config.page"
      :page-sizes="config.pageSizes"
      :page-size.sync="config.pageSize"
      :layout="config.layout"
      :total="config.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object
    }
  },
  data() {
    return {}
  },
  methods: {
    // 分页sizes改变
    handleSizeChange(pageSize) {
      this.config.pageSize = pageSize
      this.$emit('sizesChange')
    },

    // 分页page改变
    handleCurrentChange() {
      this.$emit('pageChange')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pagination-direction {
  margin-top: 10px;
}
</style>
